<template>
    <a :href="detailUrl">
        <div class="bookitem">
            <div class="thumb" @click.stop="previewImg">
                <img :src="book.image" mode="aspectFit" :lazy-load="true"/>
            </div>
            <div class="container">
                <div class="left">
                    <p class="title">{{book.title}}</p>
                    <p class="author">{{book.author}}</p>
                    <p class="publisher">{{book.publisher}}</p>
                </div>
                <div class="right">
                    <p class="rate">{{book.rate}} <rate :value="book.rate"></rate></p>
                    <p>浏览：{{book.count}}</p>
                    <p>{{book.user_info.nickname}}</p>
                </div>
            </div>
        </div>
    </a>
</template>

<script>
import Rate from '@/components/rate/rate'
export default {
    props:{
       book: {
           type: Object,
           default (){
               return {}
           }
       }
    },
    components: {
        Rate
    },
    methods:{
        previewImg(){
            wx.previewImage({
                urls:[this.book.image]
            })
        }
    },
    computed: {
        detailUrl() {
            return `/pages/detail/main?id=${this.book.id}`
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~style/varibles'
    .bookitem
        padding 10px
        margin 5px 0
        display flex
        .thumb
            flex 0 0 90px
            width 90px
            height 90px
            img
                margin 0 auto
                max-width 100%
                max-height 100%
        .container
            flex 1
            display flex
            margin-left 10px
            font-size 14px
            .left
                flex 1
                &>p
                    margin-bottom 5px
                .title
                    color $themeColor
            .right
                &>p
                    margin-bottom 5px
                .rate
                    color $themeColor
</style>
